<template>
    <div>
        <list>
            <cell class="left_cell">
                <div class="left_box">
                    <div class="left_cover">
                        <image src="" style="width: 94px; height: 94px; background-color: #ff0000"></image>
                    </div>
                    <div class="left_con_box">
                        <text class="font_30 line_h_45">123123123123123123123123123123123123123123123123123123</text>
                    </div>
                </div>
                <div class="time"><text class="color_aaa font_21">2014-08-09 22:13</text></div>
            </cell>
            <cell class="right_cell">
                <div class="right_box">
                    <div class="right_con_box">
                        <text class="font_30 line_h_45">123123123123123123123123123123123123123123123123123123</text>
                    </div>
                    <div class="right_cover">
                        <image src="" style="width: 94px; height: 94px; background-color: #ff0000"></image>
                    </div>
                </div>
                <div class="time"><text class="color_aaa font_21">2014-08-09 22:13</text></div>
            </cell>

            <cell class="left_cell">
                <div class="left_box">
                    <div class="left_cover">
                        <image src="" style="width: 94px; height: 94px; background-color: #ff0000"></image>
                    </div>
                    <div class="left_con_box">
                        <text class="font_30 line_h_45">123123123123123123123123123123123123123123123123123123</text>
                    </div>
                </div>
                <div class="time"><text class="color_aaa font_21">2014-08-09 22:13</text></div>
            </cell>
            <cell class="right_cell">
                <div class="right_box">
                    <div class="right_con_box">
                        <text class="font_30 line_h_45">123123123123123123123123123123123123123123123123123123</text>
                    </div>
                    <div class="right_cover">
                        <image src="" style="width: 94px; height: 94px; background-color: #ff0000"></image>
                    </div>
                </div>
                <div class="time"><text class="color_aaa font_21">2014-08-09 22:13</text></div>
            </cell>

            <cell class="left_cell">
                <div class="left_box">
                    <div class="left_cover">
                        <image src="" style="width: 94px; height: 94px; background-color: #ff0000"></image>
                    </div>
                    <div class="left_con_box">
                        <text class="font_30 line_h_45">123123123123123123123123123123123123123123123123123123</text>
                    </div>
                </div>
                <div class="time"><text class="color_aaa font_21">2014-08-09 22:13</text></div>
            </cell>
            <cell class="right_cell">
                <div class="right_box">
                    <div class="right_con_box">
                        <text class="font_30 line_h_45">123123123123123123123123123123123123123123123123123123</text>
                    </div>
                    <div class="right_cover">
                        <image src="" style="width: 94px; height: 94px; background-color: #ff0000"></image>
                    </div>
                </div>
                <div class="time"><text class="color_aaa font_21">2014-08-09 22:13</text></div>
            </cell>

            <cell class="left_cell">
                <div class="left_box">
                    <div class="left_cover">
                        <image src="" style="width: 94px; height: 94px; background-color: #ff0000"></image>
                    </div>
                    <div class="left_con_box">
                        <text class="font_30 line_h_45">123123123123123123123123123123123123123123123123123123</text>
                    </div>
                </div>
                <div class="time"><text class="color_aaa font_21">2014-08-09 22:13</text></div>
            </cell>
            <cell class="right_cell">
                <div class="right_box">
                    <div class="right_con_box">
                        <text class="font_30 line_h_45">123123123123123123123123123123123123123123123123123123</text>
                    </div>
                    <div class="right_cover">
                        <image src="" style="width: 94px; height: 94px; background-color: #ff0000"></image>
                    </div>
                </div>
                <div class="time"><text class="color_aaa font_21">2014-08-09 22:13</text></div>
            </cell>
        </list>
        <div class="input_box">
            <input class="input" placeholder="请输入" />
        </div>
    </div>

</template>

<style>
    .font_30 {font-size: 30px;}
    .font_21 {font-size: 21px;}
    .color_aaa {color: #aaaaaa}

    .line_h_45 {line-height: 45px;}

    .time {flex-direction: row; margin-top: 20px; width: 750px; justify-content: center}

    .left_box {flex-direction: row; justify-content: flex-start; margin-top: 50px;}
    .left_cover {margin-left: 35px;}
    .left_con_box {margin-left: 15px; background-color: #00ff00; padding-left: 40px; padding-top: 30px; padding-right: 30px; padding-bottom: 30px; max-width: 500px;}


    .right_box {flex-direction: row; justify-content: flex-end; margin-top: 50px;}
    .right_cover {margin-right: 35px;}
    .right_con_box {margin-right: 15px; background-color: #00ff00; padding-left: 30px; padding-top: 30px; padding-right: 40px; padding-bottom: 30px;max-width: 500px;}

    .input_box {width: 750px; height: 100px; background-color: #00ff00; padding-left: 20px; padding-top: 20px; padding-right: 20px; padding-bottom: 20px; align-items: flex-end}
    .input {width: 710px; height: 60px; background-color: #fff}
</style>

<script>

</script>